<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
  h1 {
    font-family: "Verdana";
    font-size: 60px;
    color:black;
    text-align: left;
    float: center;
  }

  p {
      font-family : "Verdana";
      font-size: 30px;
    }
  .username {
    font-family : "Verdana";
    border: 1px solid black;
    font-size: 30px;
    float:center;
  }

  .password {
    font-family : "Verdana";
    border: 1px solid black;
    font-size: 30px;
    float:center;
  }

  .sub {
      font-family : "Verdana";
      border: 2px solid black;
      background-color: #73c2fb;
      font-size: 30px;
      float:center;
  }

  body{
  background-color: white;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.btn {
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
  border-radius: 8px;

.btn:hover {
  background-color: #008CBA;
  color: white;
}

</style>

<body>
  <h1>Login Page</h1>
  <form action="#" th:action="@{/Login}" th:object="${Login}" method="post">

     <p>Username: <input type="text" class="username" th:feild="*{Username}" /></p>

     <p>Password: <input type="text" class="password" th:feild="*{Password}" /></p>

     <p><input type="submit" class="btn" value="Submit" />
     <input type="reset" class="btn" value="Reset" /></p>
 </form>
</body>
</html>
